<template>
	<view class="container">
		<view class="container__title">流程</view>
		<view class="container__body">
			<view class="container__body--process" :style="{'border-left':!flowUnDoUserList.length && index == list.length-1 ? '0 solid #eee' : '5rpx solid #eee'}" v-for="(item,index) in list" :key="item.Id">
				<view class="container__body--process-avator">
					<avator :avator="item.avator" :name="item.name"></avator>
				</view>
				<view class="container__body--process-content">
					<view class="container__body--process-content-top1" v-if="item.type == 5">
						<view class="container__body--process-content-top1-name">
							<text style="font-size: 25rpx;margin-right: 10rpx;">{{item.name}}</text>
							<text style="font-size: 25rpx;color: #aaa;">发表了评论</text>
						</view>
						<view class="container__body--process-content-top1-time">
							<text>{{item.time}}</text>
						</view>
					</view>
					<view class="container__body--process-content-top2" v-else>
						<view class="container__body--process-content-top2-box">
							<view class="container__body--process-content-top2-box-process">{{item.process}}</view>
							<view class="container__body--process-content-top2-box-time">
								<text>{{item.time}}</text>
								<text style="color: red;" v-if="item.status == '审批中'">{{process.SpendTime}}</text>
							</view>
						</view>
						<view class="container__body--process-content-name">
							<text>{{item.name}}</text>
							<text v-if="item.status">（{{item.status}}）</text>
						</view>
					</view>
					<view class="container__body--process-content-bottom" v-if="item.content">{{item.content}}</view>
					
				</view>
			</view>
			<view class="container__body--process"  :style="{'border-left': flowNoticeUserList.length ? '5rpx dashed #eee':''}" v-if="flowUnDoUserList.length">
				<view class="container__body--process-avator1">
					<image src="@/static/theme/default/home/shenpiren.png" mode="" v-if="flowUnDoUserList.length>1"></image>
					<avator :avator="flowUnDoUserList[0].avator" :name="flowUnDoUserList[0].name" v-if="flowUnDoUserList.length==1"></avator>
				</view>
				<view class="container__body--process-content">
					<view class="container__body--process-content-top2">
						<view class="container__body--process-content-top2-box">
							<view class="container__body--process-content-top2-box-process">{{flowUnDoUserList[0].StepName}}</view>
							<view class="container__body--process-content-top2-box-time">
								<text style="color: red;" v-if="process.SpendTime">{{process.SpendTime}}</text>
							</view>
						</view>
						<view class="container__body--process-content-name">
							<text v-if="flowUnDoUserList.length>1">{{flowUnDoUserList.length}}人依次审批</text>
							<text v-if="flowUnDoUserList.length==1">{{flowUnDoUserList[0].name}}(审批中)</text>
						</view>
					</view>
					<view class="container__body--process-content-users" v-if="flowUnDoUserList.length > 1">
						<view class="container__body--process-content-users-item" v-for="v in flowUnDoUserList" :key="v.Pxid">
							<view class="container__body--process-content-users-item-avator">
								<avator :avator="v.avator" :name="v.name"></avator>
							</view>
							<view class="container__body--process-content-users-item-text">{{v.name}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="container__body--process" style="border-left: 0 solid #eee;" v-if="process.FlowState == 0 && flowNoticeUserList.length">
				<view class="container__body--process-avator1">
					<image src="@/static/theme/default/home/laba.png" mode=""></image>
				</view>
				<view class="container__body--process-content">
					<view class="container__body--process-content-top2">
						<view class="container__body--process-content-top2-box">
							<view class="container__body--process-content-top2-box-process">抄送{{flowNoticeUserList.length}}人</view>
						</view>
						<view class="container__body--process-content-name">
							<text v-if="flowNoticeUserList.length">{{flowNoticeUserList[0].name}}</text>
						</view>
					</view>
					<view class="container__body--process-content-users" v-if="flowNoticeUserList.length > 1">
						<view class="container__body--process-content-users-item" v-for="v in flowNoticeUserList" :key="v.Pxid">
							<view class="container__body--process-content-users-item-avator">
								<avator :avator="v.avator" :name="v.name"></avator>
							</view>
							<view class="container__body--process-content-users-item-text">{{v.name}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import _custom from '@/common/_custom.js'
	import _data from '@/common/_data.js'
	import Avator from '@/components/custom/avator/avator.vue'
	
	export default {
		components: {
			Avator
		},
		data() {
			return {
				obsusername: _data.localData('name'),
				static_avator: _data.data('static_url'),
				list: [],//流程数据
				flowNoticeUserList: [],
				flowUnDoUserList: []
			}
		},
		props: {
			process: {
				type: Object,
				default: () => {}
			}
		},
		watch: {
			process: {
				deep: true,
				immediate: true,
				handler() {
					if(Object.keys(this.process).length) this.getProcess();
				}
			}
		},
		mounted() {
			uni.$on('process-confirm',() => {
				this.getProcess();
			})
		},
		methods: {
			/**
			 * 获取流程数据
			 */
			getProcess() {
				let that = this;
				this.getFlowStepLog()
				this.getFlowUnDoUserList()
				this.getFlowNoticeUserList()
			},
			/**
			 * 获取dom属性
			 * @param {Object} id  元素id
			 * @param {Object} prop  元素属性，例如top、height等
			 */
			getDomProperty(id,prop) {
				return new Promise(resolve => {
					const query = uni.createSelectorQuery().in(this);
					query.select(id).boundingClientRect(data => {
						if(data) {
							resolve(data[prop])
						} else {
							resolve(0)
						}
					}).exec();
				})
			},
			/**
			 * 获取流程流转过程
			 */
			getFlowStepLog() {
				let that = this;
				return new Promise((resolve,reject) => {
					_custom.getDataJava({
						apiname: 'getFlowStepLog',
						apiparam: {
							insflowid: this.process.InsFlowId,
						},
						success(res) {
							if(!res.length) {
								that.list = []
								return
							}
							that.list = that.formatList(res)
						}
					})
				})
			},
			/**
			 * 获取待处理人员列表
			 */
			getFlowUnDoUserList() {
				let that = this;
				return new Promise((resolve,reject) => {
					_custom.getDataJava({
						apiname: 'getFlowUnDoUserList',
						apiparam: {
							insflowid: this.process.InsFlowId,
						},
						success(res) {
							if(!res.length) {
								that.flowUnDoUserList = []
								return
							}
							let temp = []
							res = that.formatList(res)
							if(that.process.FlowState == 0) {
								if(res.length > 1) {
									that.statusText = '等待' + res[0].UserName + '等' + res.length + '人审批'
								} else {
									that.statusText = '等待' + res[0].UserName + '审批'
								}
							}
							res.forEach(item => {
								if(item.StepNo == res[0].StepNo) {
									temp.push(item)
								}
							})
							that.flowUnDoUserList = temp;
						}
					})
				})
			},
			/**
			 * 获取流程抄送人列表
			 */
			getFlowNoticeUserList() {
				let that = this;
				return new Promise((resolve,reject) => {
					_custom.getDataJava({
						apiname: 'getFlowNoticeUserList',
						apiparam: {
							insflowid: this.process.InsFlowId,
						},
						success(res) {
							if(!res.length) {
								that.flowNoticeUserList = []
								return
							}
							that.flowNoticeUserList = that.formatList(res)
						}
					})
				})
			},
			/**
			 * 格式化接口数据
			 * @param {Object} v  接口数据
			 */
			formatList(v) {
				v.forEach(item => {
					item.name = item.UserName == this.obsusername ? '我' : item.UserName;
					item.content = item.LogContent;
					item.avator = this.static_avator + "/static/photo/user/" + item.Pxid + "/70.jpg";
					item.type = item.LogType;
					item.process = item.StepName;
					item.time = item.CreateTime;
					switch(item.LogType) {
						case '-4':
							item.status = '撤销流程';
							break;
						case '-3':
							item.status = '撤回';
							break;
						case '-2':
							item.status = '回退';
							break;
						case '-1':
							item.status = '拒绝';
							break;
						case '0':
							item.status = '发起人';
							break;
						case '1':
							item.status = '同意';
							break;
						case '2':
							item.status = '转交';
							break;
						case '3':
							item.status = '征询意见';
							break;
						case '4':
							item.status = '抄送';
							break;
						case '5':
							item.status = '评论';
							break;
					}
				})
				return v
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		background-color: #fff;
		padding: 20rpx;
		
		&__title {
			height: 100rpx;
			font-size: 30rpx;
			font-weight: bold;
			line-height: 100rpx;
			padding-left: 10rpx;
		}
		
		&__body {
			position: relative;
			
			&--process {
				width: 700rpx;
				display: flex;
				padding-bottom: 80rpx;
				margin-left: 30px;
				
				&-avator {
					width: 40px;
					height: 40px;
					position: relative;
					z-index: 9;
					margin-left: -20px;
				}
				
				&-avator1 {
					width: 40px;
					height: 40px;
					position: relative;
					z-index: 9;
					background-color: #007AFF;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 10rpx;
					margin-left: -40rpx;
					
					image {
						width: 50%;
						height: 50%;
					}
				}
				
				&-content {
					margin-left: 20rpx;
					width: calc(100% - 120rpx);
					
					&-top1 {
						display: flex;
						justify-content: space-between;
						align-items: center;
						
						&-name {
							font-size: 30rpx;
						}
						
						&-time {
							font-size: 25rpx;
							color: #aaa;
						}
					}
					
					&-top2 {
						
						&-box {
							height: 40rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							
							&-process {
								color: #aaa;
								font-size: 25rpx;
							}
							
							&-time {
								font-size: 25rpx;
								color: #aaa;
							}
						}
						
						&-name {
							height: 40rpx;
							font-size: 30rpx;
						}
						
					}
					
					&-bottom {
						min-height: 60rpx;
						background-color: #eee;
						border-radius: 10rpx;
						padding: 0 10rpx;
						box-sizing: border-box;
					}
					
					&-users {
						margin-top: 10rpx;
						
						&-item {
							float: left;
							height: 100%;
							width: 105rpx;
							margin-right: 10rpx;
							margin-bottom: 20rpx;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							
							&-avator {
								height: 40px;
								width: 40px;
							}
							
							&-name {
								font-size: 25rpx;
								
							}
						}
					}
				}
			}
		}
	}
</style>
